<template>
	<view class="tab-bar">

		<!-- <view class="wa dis_f_aro" v-if="state == 'company'">
			<view class="tab-bar-item" @click="switchTab(listUser[0], 0)">
				<image class="tab_img wh48" :src="tabInd == 0 ? listUser[0].iconPath_active : listUser[0].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 0 ? activeCol : color }">{{listUser[0].text}}</view>
			</view>
			<view class="tab-bar-item" @click="switchTab(listUser[1], 1)">
				<image class="tab_img wh48" :src="tabInd == 1 ? listUser[1].iconPath_active : listUser[1].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 1 ? activeCol : color }">{{listUser[1].text}}</view>
			</view>
			<view class="add_new_inner bg_f" @click="$com.toPage('/pagesUser/release/list')">
				<view class="release_btn col_f tac">+</view>
				<view class="tac mt8 fz24" :style="{ color: color }">发布</view>
			</view>
			<view class="tab-bar-item dis_f_cc" @click="switchTab(listUser[2], 2)">
				<view class="pos_rel m0_a">
					<image class="tab_img wh48" :src="tabInd == 2 ? listUser[2].iconPath_active : listUser[2].iconPath" mode="widthFix"></image>
					<view class="tab_text" :style="{ color: tabInd == 2 ? activeCol : color }">{{listUser[2].text}}</view>
				</view>
			</view>
			<view class="tab-bar-item" @click="switchTab(listUser[3], 3)">
				<image class="tab_img wh48" :src="tabInd == 3 ? listUser[3].iconPath_active : listUser[3].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 3 ? activeCol : color }">{{listUser[3].text}}</view>
			</view>
		</view> -->

		<view v-for="(item,index) in list" :key="index" class="tab-bar-item pos_rel" @click="switchTab(item, index)">
			<image class="tab_img wh48" :src="tabInd == index ? item.iconPath_active : item.iconPath" mode="widthFix"></image>
			<view class="tab_text" :style="{ color: tabInd == index ? activeCol : color }">{{item.text}}</view>
		</view>

	</view>
</template>
<script>
	export default {
		props: {
			selectedIndex: { 			// 当前选中的tab index
				default: 0
			},
		},
		data() {
			return {
				color: "#C9CED3",
				activeCol: "#E8554F",
				tabInd: 0,
				list: [],
				state: '',
				listUser: [
					{
						"pagePath": "/pagesUser/index/index",
						"iconPath": "/static/tab/tabimg1.png",
						"iconPath_active": "/static/tab/tabimg1_a.png",
						"text": "首页"
					},
					{
						"pagePath": "/pagesUser/learn/index",
						"iconPath": "/static/tab/tabimg2.png",
						"iconPath_active": "/static/tab/tabimg2_a.png",
						"text": "学习"
					},
					{
						"pagePath": "/pagesUser/culture/index",
						"iconPath": "/static/tab/tabimg3.png",
						"iconPath_active": "/static/tab/tabimg3_a.png",
						"text": "文化"
					},
					{
						"pagePath": "/pagesUser/tool/index",
						"iconPath": "/static/tab/tabimg4.png",
						"iconPath_active": "/static/tab/tabimg4_a.png",
						"text": "工具"
					},
					{
						"pagePath": "/pages/my",
						"iconPath": "/static/tab/my.png",
						"iconPath_active": "/static/tab/my_a.png",
						"text": "我的"
					}
				],
				listAdmin: [
					{
						"pagePath": "/pagesPerson/index/index",
						"iconPath": "/static/tab/index.png",
						"iconPath_active": "/static/tab/index_a.png",
						"text": "词汇"
					},
					{
						"pagePath": "/pagesPerson/monitor",
						"iconPath": "/static/tab/data.png",
						"iconPath_active": "/static/tab/data_a.png",
						"text": "短语"
					},
					{
						"pagePath": "/pagesPerson/record/index",
						"iconPath": "/static/tab/record.png",
						"iconPath_active": "/static/tab/record_a.png",
						"text": "句子1"
					},
					{
						"pagePath": "/pagesPerson/record/index",
						"iconPath": "/static/tab/record.png",
						"iconPath_active": "/static/tab/record_a.png",
						"text": "故事"
					},
					{
						"pagePath": "/pages/my",
						"iconPath": "/static/tab/my.png",
						"iconPath_active": "/static/tab/my_a.png",
						"text": "我的"
					}
				]
			}
		},
		created() {
			this.tabInd = this.selectedIndex;
			const state = uni.getStorageSync('identify');
			this.state = state;
			if ( state == 'user' ) {
			    this.list = this.listUser;		// 用户端
			} else if ( state == 'admin' ) {
			    this.list = this.listAdmin;			// 管理端
			}
		},
		methods: {
			switchTab(item, index) {
				// console.log(item,uni.getStorageSync('identify'))
				this.tabInd = index;
				uni.reLaunch({ url: item.pagePath })
			},
		}
	}
</script>
<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); /*适配iphoneX的底部*/
		border-top: 1px solid #e4e4e4;
		z-index: 9;

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
	
	.add_new_inner{
		margin-top: -50rpx;
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border-top: 1px solid #e4e4e4;
	}
	.release_btn{
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		background-color: #E8554F;
		font-size: 72rpx;
		line-height: 78rpx;
		margin: 13rpx auto 0;
	}
</style>